<template>
  <div class="box4" ref="map">我是地图组件</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import chinaJson from './china.json'
let map = ref()
echarts.registerMap('china', chinaJson as any)
onMounted(() => {
  let mychart = echarts.init(map.value)
  mychart.setOption({
    geo: {
      map: 'china',
      roam: true,
      left: 50,
      top: 100,
      right: 50,
      bottom: 50,
      label: {
        show: true,
        color: 'white',
        fontSize: 14,
      },
      itemStyle: {
        color: 'red',
        opacity: 0.8,
      },
      emphasis: {
        itemStyle: {
          color: 'red',
        },
      },
    },
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    series: [
      {
        type: 'lines',
        data: [
          {
            coords: [
              [116.405285, 39.904989],
              [119.306239, 26.075302],
            ],
            lineStyle: {
              color: 'orange',
              width: 5,
            },
          },
          {
            coords: [
              [116.405285, 39.904989],
              [91.132212, 29.660361],
            ],
            lineStyle: {
              color: 'yellow',
              width: 5,
            },
          },
          {
            coords: [
              [116.405285, 39.904989],
              [114.298572, 30.584355],
            ],
            lineStyle: {
              color: 'yellow',
              width: 5,
            },
          },
        ],
        effect: {
          color: 'black',
          show: true,
          symbol:
            'path://M 330.7 455 l -12.7 -9.8 l 189.8 -245.7 c 12.2 -15.2 27.7 -23.2 44.8 -23.2 h 63.8 c 10.8 0 20.6 4.8 25.5 12.4 c 3.7 5.8 4.2 12.6 1.4 18.8 v 0.1 L 526.8 453.2 l -14.5 -6.9 l 116.5 -245.5 c 0.4 -0.8 0.6 -1.9 -0.3 -3.4 c -1.6 -2.5 -6 -5 -12.1 -5 h -63.8 c -12.2 0 -23.1 5.8 -32.2 17.2 L 330.7 455 Z M 613.1 920.8 h -60.5 c -22.9 0 -39.1 -17.2 -43.5 -22.4 l -0.2 -0.3 l -210.7 -274.2 l 12.7 -9.8 l 210.7 274.1 c 3.4 4.1 15.3 16.6 31.1 16.6 h 60.5 c 5.6 0 9.6 -2.3 11 -4.5 c 0.8 -1.2 0.7 -2.1 0.4 -2.8 l -127 -274.7 l 14.5 -6.7 l 127.1 275 c 2.6 5.9 2 12.5 -1.6 18 c -4.8 7.2 -14.2 11.7 -24.5 11.7 Z',
          symbolSize: 40,
        },
      },
    ],
  })
})
</script>

<style scoped></style>
